<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div class="root">
    <h1>插值语法</h1>
    <!--  使用双括号{{xxx}}来解析标签体内容-->
    <h3>你好,{{name}}</h3>
    <h3>你好,{{school.name}}</h3>
    <h1>指令语法</h1>
    <!--  使用v-bind:来解析标签属性-->
    <a v-bind:href="url">点击跳转</a>
    <!--  简写v-bind:为:来解析标签属性-->
    <a :href="url">点击跳转</a>
</div>
<script>
    new Vue({
        el: '.root',
        data: {
            name: '曾宇杰',
            url: 'https://www.baidu.com',
            school: {
                name: 'zyj'
            }
        }
    })

    /**
     * vue模板语法有2大类:
     *  1.插值语法:
     *    功能:用于解析标签体内容
     *    写法:{{xxx}},xxx是js表达式,且可以直接读取到vue实例对象属性data中所有的数据
     *  2.指令语法
     *    功能:用于解析标签(包括:标签属性,标签体内容,绑定事件)
     *    vue中有很多指令语法,都是以v-开头
     *    v-bind:用于解析标签属性,也可以简写为:
     */
</script>
</body>
</html>